<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-06-29 22:00:35
-->
<template>
  <div class="home">
    <!--网页主体内容-->
    <el-container>
      <!--头部区域-->
      <el-header>
        <Head></Head>
      </el-header>
      <br>
      <br>

      <!--主体内容位置-->

      <!--标题和介绍-->
      <el-main class="main" style="text-align:center;position: relative">
        <div class="text">
          <h1>网站快速成型工具</h1>
          <p id="text1">Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库</p>
          <br>
          <br>
        </div>

        <!--动画位置-->
        <div id="img" style="height: 550px">
          <!--红图-->
          <!--              <img id="red" src="https://element.eleme.cn/static/theme-index-red.c8e136e.png" alt="图片未找到" width="800" height="500">-->

          <!--蓝图-->
          <img id="blue" src="https://element.eleme.cn/static/theme-index-blue.c38b733.png" alt="图片未找到" width="800"
               height="500">
        </div>

        <!--卡片位置-->
        <div id="cards">
          <el-row align="middle" :gutter="20">
            <a href="#/DesignPrinciples">
              <el-col :span="5" class="col" :offset="2">
                <el-row>
                  <el-card shadow="hover" :body-style="{ padding: '5px' }" id="card1">
                    <img src="https://element.eleme.cn/static/guide.0a8462c.png" alt="加载失败"
                         style="width: 160px; height: 120px">
                    <h3>指南</h3>
                    <p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
                    <el-link :underline="false" href="#/DesignPrinciples"><p>查看详情</p></el-link>
                  </el-card>
                </el-row>
              </el-col>
            </a>

            <a href="#/01Install">
              <el-col :span="5">
                <el-card shadow="hover" :body-style="{ padding: '5px' }" id="card2">
                  <img src="https://element.eleme.cn/static/component.bd3411b.png" alt="加载失败"
                       style="width: 160px; height: 120px;">
                  <h3>组件</h3>
                  <p>使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。</p>
                  <el-link :underline="false" href="#/01Install"><p>查看详情</p></el-link>
                </el-card>
              </el-col>
            </a>

            <a href="#/Theme">
              <el-col :span="5">
                <el-card shadow="hover" :body-style="{ padding: '5px' }" id="card3">
                  <img
                      src=""
                      alt="加载失败"
                      style="width: 160px; height: 120px;">
                  <h3>主题</h3>
                  <p>在线主题编辑器，可视化定制和管理站点主题、组件样式。</p>
                  <br>
                  <el-link :underline="false" href="#/Theme" style="padding: 10px 10px 10px 10px"><p>查看详情</p></el-link>
                </el-card>
              </el-col>
            </a>

            <a href="#/Resource">
              <el-col :span="5">
                <el-card shadow="hover" :body-style="{ padding: '5px' }" id="card4">
                  <img src="https://element.eleme.cn/static/resource.a72b8f8.png" alt="加载失败"
                       style="width: 160px; height: 120px;">
                  <h3>资源</h3>
                  <p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
                  <el-link :underline="false" href="#/Resource"><p>查看详情</p></el-link>
                </el-card>
              </el-col>
            </a>
          </el-row>
        </div>


      </el-main>

      <!--底部区域-->
      <el-footer>
        <Foot></Foot>
        <el-backtop></el-backtop>
      </el-footer>

    </el-container>

  </div>


</template>

<script>


export default {
  //数据
  data() {
    return {
      //声明变量
    }
  },
  //方法
  methods: {},
  //vue钩子函数
  created() {

  },
}

</script>
<style>

</style>
<style lang="scss" scoped>
.main {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  font-size: 34px;
  margin: 0;
  line-height: 48px;
  color: #555;
}

#text1 {
  font-size: 18px;
  line-height: 28px;
  color: #888;
  margin: 10px 0 5px;
}

.card {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.el-card {
  width: 200px;
  padding: 10px 10px;
}

el-card a {
  height: 53px;
  line-height: 52px;
  font-size: 14px;
  color: #409eff;
  text-align: center;
  border: 0;
  border-top: 1px solid #eaeefb;
  padding: 0;
  cursor: pointer;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  transition: all .3s;
  text-decoration: none;
  display: block;
}

.el-link {
  padding: 10px 10px 10px 10px;
}

</style>